<template>
  <div class="loginhome">
    <h1>世界军武库</h1>
    <div class="fromdata">
      <form class="from">
        <el-input placeholder="代号" v-model="username" clearable> </el-input>
        <el-input
          placeholder="密钥"
          v-model="userpassword"
          show-password
        ></el-input>
      </form>
      <div class="button">
        <el-button type="info" @click="denglu" icon="el-icon-s-tools"
          >进入仓库</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "loGinWekk",
  data() {
    return {
      username: "",
      userpassword: "",
      userinfo: [
        {
          username: "赵珂珂",
          userpassword: 123456,
        },
      ],
    };
  },
  methods: {
    denglu() {
      if (
        this.username == this.userinfo[0].username &&
        this.userpassword == this.userinfo[0].userpassword
      ) {
        this.$message({
          message: "解锁成功",
          type: "success",
        });
        setTimeout(() => {
          this.$router.push({
            path: "/home",
          });
        }, 2000);
        axios({
          method: "GET",
          url: "https://b07cbbb7-d15e-46e6-b163-f13509c463ff.mock.pstmn.io/zhao/login",
        }).then((res) => {
          localStorage.setItem("data", JSON.stringify(res.data));
          console.log(res);
        });
      } else {
        this.$message({
          message: "警告哦，这是一条警告消息",
          type: "warning",
        });
      }
    },
  },
};
</script>

<style lang="less">
body{
  background: url("https://ts1.cn.mm.bing.net/th/id/R-C.f92a2f522b3ea6e6c46a562248da8e8b?rik=uIu7bMkBZBiSEg&riu=http%3a%2f%2ftvax1.sinaimg.cn%2flarge%2f9afb97dagy1fwgxu3typmj20u01o0n41.jpg&ehk=7rYgD8M3Lcf1F4Ld6sO%2fCCy2ahcZM%2bQQWRa9QS%2fTjvc%3d&risl=&pid=ImgRaw&r=0");
 background-size: 100%;
}
.loginhome {

  width: 8rem;
  height: 13rem;
  background-color: rgb(24, 80, 108);
  opacity: 0.8;
  margin: 0 auto;
  margin-top: 2rem;
  font-size: 0.2rem;
  border-radius: 1rem;
  h1 {
    font-size: 1rem;
    text-align: center;
    margin-top: 0.3rem;
    line-height: 1rem;
    font-weight: 600;
    color: rgb(102, 88, 179);
  }
  .fromdata {
    width: 3rem;
    margin: auto;
    margin-top: 1rem;
    font-size: 0.3rem;
    margin-left: 1.5rem;
    .from {
      line-height: 0.3rem;
      input {
        margin: 0.5rem auto;
        font-size: 0.4rem;
        width: 5rem;
      }
      .password {
        margin-left: 0.05rem;
      }
    }
    .button {
      margin-left: 0.1rem;
      font-size: 0.3rem;
      width: 3rem;
      height: 0.3rem;
      margin-top: 0.2rem;
    }
  }
}
</style>